<template>
  <ul>
    <li> <input type="checkbox" v-model="checkAll">
      <button>点击全选</button>
    </li>
    <hr>
    <li v-for="item in arr" :key="item.id">
      <input type="checkbox" v-model="item.checked" /> {{ item.name }}
    </li>
  </ul>
  <hr>
  <h1>{{ comArr2 }}</h1>
</template>
<!-- 在script标签上 写入setup 就是 setup入口函数的语法糖  -->
<script setup>
import { ref, computed, onMounted } from 'vue'
let arr = ref([
  {
    name: '唱歌',
    id: 1,
    checked: false,
  },
  {
    name: '钓鱼',
    id: 2,
    checked: false,
  },
  {
    name: '游戏',
    id: 3,
    checked: false,
  },
])

// 计算属性的不完整写法
let arr2 = ref([1,2,3,4,5,6])
let comArr2 = computed(()=>arr2.value.filter(item=>item>3))

// 计算属性什么时候执行 被依赖数据发生改变的时候执行
let checkAll = computed({
  get() {
    console.log(1);
    return arr.value.every(item => item.checked)
  },
  // 点击全选复选框 执行 set
  set(val) {
    arr.value.forEach(item => {
      item.checked = val
    });
  }
})
onMounted(()=>console.log(checkAll.value))
</script>
<!-- 再写一个script标签 使用Vue2的方法 写入name属性 -->
<script>
export default {
  name: 'App',
}
</script>
